<script lang="ts" setup>
// #region 引入包, 函数和组件
import Loading from "@/components/Loading.vue" // 加载中组件
import SearchInput from "./components/SearchInput.vue" // 搜索输入框组件
import SearchHots from "./components/SearchHots.vue" // 热门搜索组件
import SearchHistory from "./components/SearchHistory.vue" // 历史搜索组件
import SearchAdvice from "./components/SearchAdvice.vue" // 热门搜索组件
import SearchResult from "./components/SearchResult.vue" // 热门搜索组件
import { provide, type Ref, ref } from "vue"
import { useMusicStore } from "@/store"
import { searchAdviceApi, searchResultApi } from "@/services"
import type { SearchAdviceItem, SearchResultItem } from "@/services/type"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
// music 状态管理
const music = useMusicStore()
// #endregion

// #region // 变量
const search_value = ref("") // 搜索框绑定的值
const flag = ref(-1) // 切换显示 热门搜索-1 / 搜索建议0 / 搜索结果1
const adviceList = ref<SearchAdviceItem[]>([]) // 搜索建议列表
const resultList = ref<SearchResultItem[]>([]) // 搜索结果列表
const inputIsFocus = ref(false) // 输入框的状态样式 false: 失焦状态(初始状态) true: 聚焦状态
// #endregion

// #region // 函数
// 获取搜索建议的函数
const getSearchAdvice = async (value: string) => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调搜索建议接口
    const res = await searchAdviceApi(value)
    console.log(Object.keys(res.result).length)
    // 有数据才返回
    if (Object.keys(res.result).length) {
      adviceList.value = res.result.allMatch
    } else {
      adviceList.value = []
    }
    // 成功之后显示搜索建议组件
    flag.value = 0
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// 获取搜索结果的函数
const getSearchResult = async (value: string) => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调搜索结果接口
    const res = await searchResultApi(value)
    console.log(res)
    if (res.result.songCount) {
      resultList.value = res.result.songs
      // 添加历史搜索记录
      music.changeHistorySearch(value)
    } else {
      resultList.value = []
    }
    // 成功之后显示搜索结果组件
    flag.value = 1
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// 改变search_value
const changeSearchValue = (val: string) => {
  search_value.value = val
}
// 改变input显示状态函数
const changeInputIsFocus = (bol: boolean) => {
  inputIsFocus.value = bol
}
// 去结果页
const toResult = (i: string) => {
  // 更新历史记录
  music.changeHistorySearch(i)
  // 显示聚焦状态的input
  changeInputIsFocus(true)
  // 输入框反显
  changeSearchValue(i)
  // 结果页
  getSearchResult(i)
}
// #endregion

// #region // 生命周期和vue函数
export interface ProvideInject {
  getSearchResult: (value: string) => Promise<void>
  search_value: Ref<string, string>
  changeSearchValue: (val: string) => void
  inputIsFocus: Ref<boolean, boolean>
  changeInputIsFocus: (bol: boolean) => void
  toResult: (i: string) => void
}
provide<ProvideInject>("search", {
  getSearchResult,
  search_value,
  changeSearchValue,
  inputIsFocus,
  changeInputIsFocus,
  toResult,
})
// #endregion
</script>

<template>
  <scroll-view
    class="search"
    scroll-y
  >
    <search-input @getAdvice="getSearchAdvice" v-model:flag="flag"></search-input>
    <search-history v-if="flag < 0 && music.historySearch.length"></search-history>
    <search-hots v-if="flag < 0"></search-hots>
    <search-advice v-else-if="!flag" :list="adviceList"></search-advice>
    <search-result v-else :list="resultList"></search-result>
  </scroll-view>

  <Loading></Loading>
</template>

<style lang="scss" scoped>
.search {
  width: 100%;
  box-sizing: border-box;
}
</style>
